<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>主题</title>
<link rel="stylesheet" href="/layui/css/layui.css" />
</head>
<body>
<table class="layui-hide" id="topicTable" lay-filter="topicTable"></table>
	<div id="toolbarDemo" style="display: none;">
		<button class="layui-btn layui-btn-normal" lay-event="addTopic">我要发帖</button>
	</div>
<div style="padding: 10px;display: none;" id="addTopic" >
	<form action="" id="addTopicData" class="layui-form" lay-filter="addTopicData">
		<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-block">
				<input type="text" name="title" 
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">作者</label>
			<div class="layui-input-block">
				<input type="text" name="author" 
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">类容</label>
			<div class="layui-input-block">
				<textarea  name="content" 
					autocomplete="off" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-input-block" style="text-align: center;">
				<button class="layui-btn" lay-submit="" id="doSubmit" lay-filter="doSubmit">发表评论</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
	</form>
</div>
<!-- 查看，评论弹出层开始 -->
<div style="padding: 10px;display: none;" id="replyDiv" >
	<div align="center">
		<span id="title"></span>
		<span id="author"></span>
		<span id="createdate"></span>
		被浏览过<span id="clickamount"></span>次
		<br><br>
		正文:<span id="content"></span>
	</div>
	<h3 id="content" align="center"></h3>
	<hr>
	
	<div align="center">
	
		<h2 style="color: red">以下是评论区域</h2>
		<h3>=======================================</h3>
	</div>
	<div id="reply" align="center">
	</div>
	<hr>
	
	<form action="" id="dataFrm" class="layui-form" lay-filter="dataFrm">
		<div class="layui-form-item">
		<input type="hidden" id="topicid" name="topicid">
			<label class="layui-form-label">昵称</label>
			<div class="layui-input-block">
			<input type="hidden" name="id" id="id">
				<input type="text" name="author" 
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">评论</label>
			<div class="layui-input-block">
				<textarea  name="content" 
					autocomplete="off" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-input-block" style="text-align: center;">
				<button class="layui-btn" lay-submit="" id="doSubmit" lay-filter="doSubmit">发表评论</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
	</form>
</div>
<!-- 查看，评论弹出层结束 -->
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['table','form','jquery','layer'], function(){
	  var table = layui.table;
	  var form = layui.form;
	  var $ = layui.jquery;
	  var layer = layui.layer;
		var tableIns = table.render({
	    elem: '#topicTable'
	    ,url:'/sys/topic/loadAllTopic'
	    ,toolbar:'#toolbarDemo'
	    ,height:'500px'
	    ,cols: [ [
	      {field:'title', title: '标题',align:"center"}
	      ,{field:'author', title: '作者',align:"center"}
	      ,{field:'createdate', title: '发帖时间',align:"center"}
	      ,{field:'clickamount', title: '浏览量',align:"center"}
		] ]
	    ,page: true
	  });
	  
		 //监听行单击事件（单击事件为：rowDouble）
		  table.on('row(topicTable)', function(obj){
		    var data = obj.data;
		    showTopic(data);
		  });
		  function showTopic(data){
				index1 = layer.open({
					type : 1,
					title : '评论',
					content : $("#replyDiv"),  
					skin : 'layui-layer-molv',
					area : [ '700px', '500px' ],
					shadeClose:true,//设置是否点击遮罩关闭
					maxmin:true,//设置是否显示最大化和最小化的按钮
					success: function(layero, index){   //弹出成功之后的回调方法
						$("#topicid").val(data.topicid);
						$("#title").html(data.title);
						$("#author").html(data.author);
						$("#createdate").html(data.createdate);
						$("#clickamount").html(data.clickamount);
						$("#content").html(data.content);
						$.post("/sys/reply/loadAllReply?topicid="+data.topicid,function(obj){
							var replaydata;
							for (var i = 0; i < obj.length; i++) {
								replaydata ="<span>"+"昵称："+obj[i].author+"</span> <span>"+"时间："+obj[i].createdate+"</span><br><span>"+obj[i].content+"</span><br><h3>=======================================</h3>";
							}
							$("#reply").append(replaydata);
						});
						 $("#dataFrm")[0].reset();
						tableIns.reload();
					}
				});
			}
	  table.on('toolbar(topicTable)', function(obj){
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
		    case 'addTopic':
				openAddTopic();
		    break;
		  };
		});
	  function openAddTopic(){
		  form.render();
			 index = layer.open({
					type : 1,
					title : '我要发帖',
					content : $("#addTopic"),  
					skin : 'layui-layer-molv',
					area : [ '700px', '400px' ],
					shadeClose:true,//设置是否点击遮罩关闭
					maxmin:true,//设置是否显示最大化和最小化的按钮
					resize:true,//设置是否支持拉伸缩小放大  默认为true
					success: function(layero, index){   //弹出成功之后的回调方法
						 //清空表单里面的数据
						$("#dataFrm")[0].reset();
						url="/sys/topic/addTopic";
					}
				});
	  }
	  form.on("submit(addTopicData)",function(data){
			var params=$("#addTopicData").serialize();
			$.post("/sys/topic/addTopic",params,function(obj){
				layer.msg(obj.msg);
				//刷新数据表格
				tableIns.reload();
				layer.close(index);
			})				
			return false;
		});
	  form.on("submit(dataFrm)",function(data){
			var params=$("#dataFrm").serialize();
			$.post("/sys/reply/addReply",params,function(obj){
				layer.msg(obj.msg);
				//刷新数据表格
				tableIns.reload();
				layer.close(index1);
			})				
			return false;
		});
	//监听表体事件
		table.on('tool(topicTable)', function(obj){
		  switch(obj.event){
		    case 'deleteTopic':
		    	deleteTopic(obj.data);
		    break;
		    case 'updateTopic':
		    	updateTopic(obj.data);
		  };
		  return false;
		});
	});

</script>
</body>
</html>